
<div class="jtk-demo-main" id="jtk-demo-flowchart">

    <!-- main drawing area -->
    <div class="jtk-demo-canvas">

        <jsplumb-surface surfaceId="surface"
                         toolkitId="toolkitId"
                         [view]="view"
                         [renderParams]="renderParams"
                         [toolkitParams]="toolkitParams"
        >

        </jsplumb-surface>

        <!--
            A helper component that ships in the Toolkit since 6.2.0. Provides undo/redo, zoom to fit, etc.
        -->
        <jsplumb-controls surfaceId="surface"></jsplumb-controls>

        <div class="jtk-export">
            <span>Export:</span>
            <a href="#" id="exportSvg" (click)="exportSVG()">SVG</a>
            <a href="#" id="exportPng" (click)="exportPNG()">PNG</a>
            <a href="#" id="exportJpg" (click)="exportJPG()">JPG</a>
        </div>

        <!-- miniview -->
        <jsplumb-miniview surfaceId="surface"></jsplumb-miniview>
    </div>
    <div class="jtk-demo-rhs">
        <!-- the node palette -->
        <div class="sidebar node-palette">
            <jtk-shape-palette surfaceId="surface" [dataGenerator]="dataGenerator" [initialSet]="initialShapeSet"></jtk-shape-palette>
        </div>
        <!-- node/edge inspector -->
        <app-inspector surfaceId="surface"></app-inspector>

        <div class="description">
            <p>
                This sample application is a builder for flowcharts.
            </p>
        </div>
    </div>
</div>



